<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            width: 250px;
            height: 250px;
        }

        /* 当鼠标滑过图片的时候发生的操作 */
        img:hover{
            /* 设置元素的边框大小 实线 红色 */
            border: 5px solid red;
            width: 350px;
            height: 350px;

        }

        li{
            background-color: blue;
            width: 200px;

            border:1px solid #999;
        }

        a{
            color:black;
        }

        /* 当li滑过的时候,li的背景颜色变成黄色 */
        li:hover{
            background-color:yellow;
        }
         /* 当滑过li里a的时候,li标签下的所有的a标签的样式 */
        a:hover{
            color:white;

        }


    
    </style>


</head>

<body>
    <div>
        <img src="imgs/mr.jpg" alt="图片加载失败">
        <img src="imgs/mr.jpg" alt="图片加载失败">
        <img src="imgs/mr.jpg" alt="图片加载失败">
        <img src="imgs/yy.jpg" alt="图片加载失败">

        <hr>

        <ul>
            <li><a href="#">corejava</a></li>
            <li><a href="#">java</a></li>
            <li><a href="#">mysql</a></li>
        </ul>

    </div>

</body>

</html>